<template>
	<view class="change-password-container">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="nav-title">密码修改</text>
			<view class="nav-right"></view>
		</view>
		
		<!-- 密码修改表单 -->
		<view class="form-container">
			<view class="form-item">
				<text class="form-label">当前密码</text>
				<view class="input-wrapper">
					<input 
						class="input-field" 
						:type="showCurrentPassword ? 'text' : 'password'" 
						placeholder="请输入当前密码" 
						v-model="formData.currentPassword"
					/>
					<text class="password-toggle" @click="toggleCurrentPassword">
						{{ showCurrentPassword ? '👁️' : '👁️‍🗨️' }}
					</text>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label">新密码</text>
				<view class="input-wrapper">
					<input 
						class="input-field" 
						:type="showNewPassword ? 'text' : 'password'" 
						placeholder="请输入新密码" 
						v-model="formData.newPassword"
					/>
					<text class="password-toggle" @click="toggleNewPassword">
						{{ showNewPassword ? '👁️' : '👁️‍🗨️' }}
					</text>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label">确认新密码</text>
				<view class="input-wrapper">
					<input 
						class="input-field" 
						:type="showConfirmPassword ? 'text' : 'password'" 
						placeholder="请再次输入新密码" 
						v-model="formData.confirmPassword"
					/>
					<text class="password-toggle" @click="toggleConfirmPassword">
						{{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
					</text>
				</view>
			</view>
			
			<!-- 密码强度提示 -->
			<view class="password-tips" v-if="formData.newPassword">
				<text class="tips-title">密码要求：</text>
				<view class="tips-item" :class="{ valid: hasMinLength }">
					<text class="tips-icon">{{ hasMinLength ? '✓' : '○' }}</text>
					<text class="tips-text">至少8位字符</text>
				</view>
				<view class="tips-item" :class="{ valid: hasNumber }">
					<text class="tips-icon">{{ hasNumber ? '✓' : '○' }}</text>
					<text class="tips-text">包含数字</text>
				</view>
				<view class="tips-item" :class="{ valid: hasLetter }">
					<text class="tips-icon">{{ hasLetter ? '✓' : '○' }}</text>
					<text class="tips-text">包含字母</text>
				</view>
			</view>
			
			<button class="submit-btn" @click="handleSubmit" :disabled="loading">
				{{ loading ? '修改中...' : '确认修改' }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					currentPassword: '',
					newPassword: '',
					confirmPassword: ''
				},
				showCurrentPassword: false,
				showNewPassword: false,
				showConfirmPassword: false,
				loading: false
			}
		},
		computed: {
			// 密码长度检查
			hasMinLength() {
				return this.formData.newPassword.length >= 8;
			},
			// 包含数字检查
			hasNumber() {
				return /\d/.test(this.formData.newPassword);
			},
			// 包含字母检查
			hasLetter() {
				return /[a-zA-Z]/.test(this.formData.newPassword);
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 切换当前密码显示
			toggleCurrentPassword() {
				this.showCurrentPassword = !this.showCurrentPassword;
			},
			
			// 切换新密码显示
			toggleNewPassword() {
				this.showNewPassword = !this.showNewPassword;
			},
			
			// 切换确认密码显示
			toggleConfirmPassword() {
				this.showConfirmPassword = !this.showConfirmPassword;
			},
			
			// 表单验证
			validateForm() {
				if (!this.formData.currentPassword) {
					uni.showToast({
						title: '请输入当前密码',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.formData.newPassword) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.hasMinLength || !this.hasNumber || !this.hasLetter) {
					uni.showToast({
						title: '新密码不符合要求',
						icon: 'none'
					});
					return false;
				}
				
				if (this.formData.newPassword !== this.formData.confirmPassword) {
					uni.showToast({
						title: '两次输入的新密码不一致',
						icon: 'none'
					});
					return false;
				}
				
				if (this.formData.currentPassword === this.formData.newPassword) {
					uni.showToast({
						title: '新密码不能与当前密码相同',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			
			// 提交修改
			async handleSubmit() {
				if (!this.validateForm()) {
					return;
				}
				
				this.loading = true;
				
				try {
					// 模拟密码修改请求
					await this.mockChangePassword();
					
					uni.showToast({
						title: '密码修改成功',
						icon: 'success'
					});
					
					// 清空表单
					this.formData = {
						currentPassword: '',
						newPassword: '',
						confirmPassword: ''
					};
					
					// 返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
					
				} catch (error) {
					uni.showToast({
						title: error.message || '密码修改失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			
			// 模拟密码修改请求
			mockChangePassword() {
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						// 模拟验证当前密码
						if (this.formData.currentPassword === '123456') {
							resolve();
						} else {
							reject(new Error('当前密码错误'));
						}
					}, 1000);
				});
			}
		}
	}
</script>

<style>
	.change-password-container {
		min-height: 100vh;
		background-color: #f5f5f7;
	}
	
	.status-bar {
		height: 64rpx;
	}
	
	.navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		background-color: white;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #e5e5e5;
	}
	
	.nav-left {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.back-icon {
		font-size: 36rpx;
		color: #333;
	}
	
	.nav-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.nav-right {
		width: 60rpx;
	}
	
	.form-container {
		background-color: white;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.form-item {
		margin-bottom: 40rpx;
	}
	
	.form-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: bold;
	}
	
	.input-wrapper {
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 15rpx;
		padding: 0 25rpx;
		height: 90rpx;
		border: 2rpx solid #e9ecef;
	}
	
	.input-wrapper:focus-within {
		border-color: #667eea;
	}
	
	.input-field {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}
	
	.password-toggle {
		font-size: 30rpx;
		color: #6c757d;
		padding: 10rpx;
	}
	
	.password-tips {
		background: #f8f9fa;
		border-radius: 15rpx;
		padding: 25rpx;
		margin-bottom: 40rpx;
	}
	
	.tips-title {
		display: block;
		font-size: 26rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: bold;
	}
	
	.tips-item {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.tips-item:last-child {
		margin-bottom: 0;
	}
	
	.tips-icon {
		font-size: 24rpx;
		margin-right: 15rpx;
		color: #999;
	}
	
	.tips-item.valid .tips-icon {
		color: #4caf50;
	}
	
	.tips-text {
		font-size: 24rpx;
		color: #666;
	}
	
	.tips-item.valid .tips-text {
		color: #4caf50;
	}
	
	.submit-btn {
		width: 100%;
		height: 90rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 15rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.submit-btn:disabled {
		opacity: 0.6;
	}
</style>
